<template>
  <div class="retrieval">
    <slot></slot>
    <div class="retrieval-cont">
      <h3>设备检索</h3>
    <p>
      设备编号
      <el-input v-model="id"></el-input>
    </p>
    <p>
      设备名称
      <el-input v-model="name"></el-input>
    </p>
    <p>
      设备状态
      <el-select v-model="status" placeholder="全部状态">
        <el-option v-for="item in statuses" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
    </p>
    <p>
      设备分类
      <el-select v-model="categorys" placeholder="全部分类">
        <el-option v-for="item in category" :key="item.id" :label="item.name" :value="item.id">
        </el-option>
      </el-select>
    </p>
    <p>
      <el-button type="primary" @click="queryDevice">查询</el-button>
    </p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DeviceRetrieval',
  data() {
    return {
      id: '',
      name: '',
      status: '',
      
      categorys: '',
      deviceList: '',
      queryData: {
        page:1,
        pageSize:10,
        id: '',
        name: '',
        status: '',
        category:''
      }
    }
  },
  props: ['category','statuses'],
  methods: {
    queryDevice() {

      // this.queryData.arr.list = this.deviceList.list.filter((item, index, arr) => {
      //   if (this.id == '') return arr;
      //   return item.id == this.id
      // }).filter((item, index, arr) => {
      //   if (this.name == '') return arr;
      //   return item.name == this.name
      // }).filter((item, index, arr) => {
      //   if (this.status == '') return arr;
      //   return item.status == this.status
      // }).filter((item, index, arr) => {
      //   if (this.categorys == '') return arr;
      //   return item.category == this.categorys
      // })
      // this.queryData.arr.total = this.queryData.arr.list.length
      this.queryData.page = 1;
      this.queryData.id = this.id
      this.queryData.name = this.name
      this.queryData.status = this.status
      this.queryData.category = this.categorys
      // this.$store.commit('changeResult', this.queryData)
      this.$bus.$emit('changeQueryData', this.queryData)
    }
  },
  created() {
    this.$axios({
      method: "post",
      url: '/pre-list',
      data: {
        pageNo: 1,
        pageSize: 100
      }
    }).then(res => {
      this.deviceList = res.data.data
    })
  }
}
</script>

<style lang="less" scoped>
.retrieval {
  height: 100%;
  h3 {
    color: #696969;
    font-size: 22px;
    margin-bottom: 30px;
  }
  .retrieval-cont {
  width: 300px;
  min-height: 560px;
  padding: 15px;
  box-sizing: border-box;
  background-color: #f9f9f9;

  p {
    display: flex;
    height: 40px;
    margin-top: 16px;
    align-items: center;
    justify-content: space-between;

    .el-input,
    .el-select {
      width: 196px;
    }

    .el-button {
      width: 100%;
    }
  }
  }
}
</style>